<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>多节课进阶</title>
		<link rel="stylesheet" href="css/swiper.min.css">
		<script src="js/jquery-1.10.1.min.js"></script>
		<script src="js/swiper.min.js"></script>



		<link rel="stylesheet" type="text/css" href="fonts/iconfont.css" />
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/more.css" />


		<style type="text/css">
			header {
				width: 100%;
				overflow: hidden;
			}

			main {
				overflow: hidden;
			}

			.tabs {
				height: 0.7rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;
			}

			.tabs a {
				flex: 1;
				height: 0.7rem;
				font-size: 0.28rem;
				font-weight: 400;
				line-height: 0.7rem;
				text-align: center;
				border-bottom: 2px solid #D8D8D8;
				color: rgba(51, 51, 51, 1);
			}
			.tabs a:nth-child(2):before{
				content: "";
				display: block;
				position: absolute;
				top:.17rem;
				width: 0.02rem;
				height: 0.34rem;
				background: #D8D8D8;
				left: 32%;
			}
			.tabs a:nth-child(2):after{
				content: "";
				display: block;
				position: absolute;
				top:.17rem;
				width: 0.02rem;
				height: 0.34rem;
				background: #D8D8D8;
				left: 67%;
			}

			.tabs .active{
				color: rgba(238, 193, 79, 1) !important;
			}
			
			.box {
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<header>
				<img src="images/top.png">
				<a href="index-rec.html"><span class="iconfont icon-left"></span></a>
				<span class="s1">多节课进阶</span>
				<a href="search.html"><span class="iconfont icon-search"></span></a>
			</header>


			<main>
				<div class="tabs">
					<a href="#" class="active">综合</a>
					<a href="#">热门</a>
					<a href="#">新增</a>
				</div>
				<div id="tabs-container" class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<ul class="news-list">
								<div class="box">
									<div class="main2">
										<a href="">
											<img src="images/pic1.png">
										</a>
										<div class="m-bottom">
											<h3>素描花卉·零基础快速上手掌握</h3>
											<div class="mm">
												<span>导师:秦潇</span>
												<span>35人已购</span>
											</div>
										</div>
									</div>

									<div class="main2">
										<a href="">
											<img src="images/pic2.png">
										</a>
										<div class="m-bottom">
											<h3>黄有维《不一样的水彩课》</h3>
											<div class="mm">
												<span>导师:黄有维</span>
												<span>2402人已购</span>
											</div>
										</div>
									</div>

									<div class="main2">
										<a href="">
											<img src="images/pic3.png">
										</a>
										<div class="m-bottom">
											<h3>黄有维《不一样的水彩课》</h3>
											<div class="mm">
												<span>导师:黄有维</span>
												<span>2402人已购</span>
											</div>
										</div>
									</div>


							</ul>
						</div>

						<!-- 2 -->
						<div class="swiper-slide">
							<ul class="news-list">
								<div class="box">
									<div class="main2">
										<a href="">
											<img src="images/pic2.png">
										</a>
										<div class="m-bottom">
											<h3>黄有维《不一样的水彩课》</h3>
											<div class="mm">
												<span>导师:黄有维</span>
												<span>2402人已购</span>
											</div>
										</div>
									</div>




								</div>


							</ul>
						</div>

						<!-- 3 -->
						<div class="swiper-slide">
							<ul class="news-list">
								<div class="box">

									<div class="main2">
										<a href="">
											<img src="images/pic1.png">
										</a>
										<div class="m-bottom">
											<h3>素描花卉·零基础快速上手掌握</h3>
											<div class="mm">
												<span>导师:秦潇</span>
												<span>35人已购</span>
											</div>
										</div>
									</div>

								</div>




						</div>

						</ul>
					</div>

				</div>
		</div>
		</main>
		</div>
		<script type="text/javascript">
			window.onload = function() {
				

				

				

				var tabsSwiper = new Swiper('#tabs-container', {
					speed: 500,
					on: {
						slideChangeTransitionStart: function() {
							$(".tabs .active").removeClass('active');
							$(".tabs a").eq(this.activeIndex).addClass('active');
						}
					}
				})
				$(".tabs a").on('click', function(e) {
					e.preventDefault()
					$(".tabs .active").removeClass('active')
					$(this).addClass('active')
					tabsSwiper.slideTo($(this).index())
				})
			}
		</script>
	</body>
</html>
